<template>
    <div>
        <el-drawer
            v-model="isShow"
            size="50%"
            :destroy-on-close="true"
            @close="closeHandle"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :show-close="false"
        >
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
            </template>
            <el-form :model="form" label-width="auto" label-position="right" ref="formRef" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="部门受案号" required prop="name">
                            <el-input v-model="form.name" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="律师柜">
                            <el-input v-model="form.name" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="存放人员">
                            <el-input v-model="form.casecode" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="存放时间">
                            <el-input v-model="form.casecode" :readonly="isreadonly"/>
                        </el-form-item>
                    </el-col>
                    <el-divider class="mt-3 mb-3"/>
                    <el-col :span="24" class="mt-0 mb-3">
                        <h4 class="tittle"><span class="tittle_dian me-2"></span><span>文件信息列表</span></h4>
                    </el-col>
                    <el-col :span="24">
                        <el-table
                        ref="TableDataRef"
                        v-loading="loading"
                        :data="TablesData"
                        show-overflow-tooltip
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        >
                            <el-table-column type="index" label="编号" width="50" />
                            <el-table-column label="文件名称" prop="casetype"/>
                            <el-table-column label="数量" prop="userName"/>
                            <el-table-column label="存储时间" prop="casetype"/>
                        </el-table>
                    </el-col>
                </el-row>

            </el-form>
            <template #footer>
                <el-button type="primary" @click="submitHandle">确认核对</el-button>
                <el-button @click="isShow = false">关闭</el-button>
            </template>
        </el-drawer>
    </div>
</template>

<script setup>
const {proxy} = getCurrentInstance()
// import {getCaseInfoList,getCaseInfoInfo} from "@/api/CaseInfo/CaseInfo";
import PageEnum from "@/enum/PageEnum.js";
// 是否显示抽屉
const isShow = ref(false)
const loading = ref(false)
const isreadonly = ref(true)
const total = ref(0)
const queryParams = ref({
    name: '',
    casecode: '',
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const TablesData = ref([
            { id: 1, name: '文件A', num: 10,},
            { id: 2, name: '文件B', num: 5,},
            { id: 1, name: '文件A', num: 10, },
            { id: 2, name: '文件B', num: 5, },
            { id: 1, name: '文件A', num: 10, },
            { id: 2, name: '文件B', num: 5, },
            { id: 1, name: '文件A', num: 10, },
            { id: 2, name: '文件B', num: 5,},
            { id: 1, name: '文件A', num: 10,},
            { id: 2, name: '文件B', num: 5, },
            { id: 1, name: '文件A', num: 10,},
            { id: 2, name: '文件B', num: 5,},
        ])
const rowvalue = ref()
// 抽屉标题
const title = ref('')

const rules = {
    name: [{ required: true, message: "案件名称不能为空", trigger: "change" }],
    unitId: [{ required: true, message: "办案单位不能为空", trigger: "blur" }],
    depid: [{ required: true, message: "办案部门不能为空", trigger: "blur" }],
}

const isAdd = ref(true)

const form = ref({
    num:0
})
// 通知事件
const emit = defineEmits(['getCaseList'])

const changeShowStatus = () => {
    isShow.value = !isShow.value
}

onMounted(() => {
    
})
// 获取案件列表
const getTableDataLists = async () => {
    // loading.value = true
    // await getCaseInfoList(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    //     loading.value = false;
    //     TablesData.value = res.rows
    //     total.value = res.total;
    // });
}
const handleCurrentChange = (val) => {
    rowvalue.value = val
    console.log(val)
}

const showEditCase = async (data,OperateType) => {
    if(OperateType == "edit"){
        title.value = '修改资料信息'
        isAdd.value = true
        isreadonly.value = false
    }else{
        title.value = '资料详情'
        isAdd.value = false
        isreadonly.value = true
    }
    // 对传过来的案由中文进行查找出其对应的casebriefId值
    // await getCaseInfoInfo(data.caseCaseinfoId).then(res => {
    //         form.value = res.data
    //         getDepartment()
    //     })
    changeShowStatus()
}

defineExpose({showEditCase})


const submitHandle = async () => {
    console.log(TablesData.value)
    // 确认核对
}
const getCaseData = (data) => {
    console.log("儿子传过来数据了",data)
}

// 关闭后的回调事件
const closeHandle = () => {
}
</script>

<style lang="scss" scoped>
h4{margin:0;}
.tittle{display: flex;align-items: center;color: #0077B9;}
:deep() .el-date-editor {
  width: 100%;
}
:deep() .el-cascader{width: 100%;}
:deep() .el-drawer__body{padding: 10px 20px;}

.tittle_dian{width:7px;height:16px;display: inline-block;background: #0077B9;}

/* 自定义选中行的背景颜色 */
// :deep() .el-table__body tr.current-row>td.el-table__cell{background-color: #ced6da;}

</style>